<template>
  <div class="page">
    <m-header :title="MyRobot.adding_gold" :canback="Boolean(1)"></m-header>
    <div class="body">
      <ul class="wrap">
        <li class="list">
          <span>{{MyRobot.name_original_robot}}</span>
          <span>{{info.name}}</span>
        </li>
        <li class="list">
          <span>{{MyRobot.original_deposit}}</span>
          <span>{{info.realpay}}{{MyRobot.dollar}}</span>
        </li>
        <li class="list">
          <span>{{MyRobot.days_original_earnings}}</span>
          <span>{{info.day}}</span>
        </li>
        <li class="list">
          <span>{{MyRobot.increase_amount}}</span>
          <input type="text" class="inp" :placeholder="MyRobot.enter_int" v-model="money" />
          <span>{{MyRobot.dollar}}</span>
        </li>
        <li class="list" style="color:#406EC3">{{MyRobot.transfer_information}}</li>
        <li class="list">
          <span>{{MyRobot.transfer_period}}</span>
          <span>{{info.day}}</span>
        </li>
        <li class="list">
          <span>{{MyRobot.transfer_deposit}}</span>
          <span>{{info.realpay}}{{MyRobot.dollar}}</span>
        </li>
        <!-- <li class="list">
          <span>转期押金</span>
          <input type="text" class="inp" placeholder="请输入整数" v-model="money" />
          <span>美金</span>
        </li>-->
        <li class="list">
          <span>{{MyRobot.maturity_time}}</span>
          <span>{{info.deadline}}</span>
        </li>
        <li class="list">
          <span>{{MyRobot.price_difference}}</span>
          <span>{{money}}</span>
        </li>
        <li class="list tips">
          {{MyRobot.be_careful}}
        </li>
      </ul>
      <button type="button" class="btn-submit btn-origin" @click="upgrade">{{MyRobot.adding_gold}}</button>
    </div>
    <m-load ref="load"></m-load>
  </div>
</template>
<script>
import { Robot } from "@/server/server.js";
import { Load } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      info: {},
      money: null,
      id: null,
      MyRobot: {}
    };
  },
  computed: {
    ...mapGetters(["lang"])
  },
  created() {
    this.id = this.$route.params.id;
    this.MyRobot = this.lang.MyRobot
    Robot.showorder({ id: this.id }).then(res => {
      if (res.code == 1) {
        this.info = res.data.data;
      } else {
        mui.toast(res.msg);
      }
    });
  },
  methods: {
    upgrade() {
      if (!this.money) {
        mui.toast(this.MyRobot.enter_amount);
        return
      }
      Load.loadStart(this);
      Robot.upgrade({ id: this.id, money: this.money }).then(res => {
        if (res.code == 1) {
          mui.toast(res.msg);
          setTimeout(() => {
            Load.loadEnd(this);
            this.$router.go(-1);
          }, 500);
        } else {
          Load.loadEnd(this);
          mui.toast(res.msg);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  //   padding: @margin-primary;
  background-color: white;
  .wrap {
    .list {
      padding: 28px;
      .display-flex();
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #ccc;
      font-size: 34px;
      .inp {
        flex: 1;
        margin: 0 10px;
      }
    }
    .tips {
      color: #d0021b;
      font-size: 24px;
    }
  }
  .btn-submit {
    padding: 20px 0;
    margin: 30px auto;
    display: block;
    width: 80%;
    background: rgba(64, 110, 195, 1);
    border-radius: 10px;
    font-size: 32px;
  }
}
</style>